import React, { Component } from 'react';

class SelectGrand extends Component {

  componentDidMount() {
    
  }

  state = {
    selectOptionGrand: '',
  }

  selectGrand = e => {
    console.log(e.target.value)
    // let 
    this.setState({
      selectOptionGrand: e.target.value
    })
    this.props.toGrand(e.target.value)
  }

  render() {

    const ownOptions = [
      {i: 1, val: 'grand1'},
      {i: 2, val: 'grand2'},
      {i: 3, val: 'grand3'},
    ]

    return (
      <div>
        <div>
          <select onChange={this.selectGrand} value={this.state.selectOptionGrand}>
            {
              ownOptions.map( (v,i) => 
                <option value={v.val} key={v.i}>{v.val}</option>
              )
            }
          </select>
          {/* <p>请输入第三代：<input onChange={this.props.handleEmail}/></p>     */}
          <div>
            <p>grand - res: {this.state.selectOptionGrand} </p>
            {/* <p>receiveUncle - res: {this.props.toGrand}</p> */}
            <p>uncleToGrandSon -res: {this.props.receiveUncle} </p>
          </div>      
        </div>
      </div>
    )
  }
}

export default SelectGrand;